<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!-- Representer part begin-->
    <div class="row">
        <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <label for="videoprofile"><h4><strong>演讲者信息</strong></h4> </label>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" style="text-align: right;">
            <a class="btn btn-info btn-sm" style="margin-top: 5px;" href="#" data-toggle="modal" data-target="#repsmodal">新建</a>
        </div>
    </div>
    <div id="repdefaultValue" style="display: none;">
         <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            
        </div>
        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
            ---请选择---
        </div>
        <input type="hidden" value="default">
      <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="selectrepsicon">
            <span class="glyphicon glyphicon-triangle-bottom" style="color: #333; position: absolute; top: 5px; height: 20px; right: 3px;"></span>
        </div>
    </div>
    <div class="form-control input-md" id="repselectedValue" style="cursor: pointer;">
    </div>
    <div style="height: 150px; overflow: auto; display: none;" id="repsoptions">
    <c:forEach items="${reps }" var="rep">
        <div class="form-control input-md" id="repsoption_${rep.id }" onclick="selectReps(this.id)">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <img style="margin: 0px 0px 0px 20px; padding: 0px; width: 25px; height: 25px;" src="${rep.avatarUri }" class="img-circle">
            </div>
            <input type="hidden" value="${rep.id }">
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                ${rep.name }
            </div>
        </div>
    </c:forEach>
    </div>
<!-- Representer part end-->
<!-- Modal -->
<div class="modal fade" id="repsmodal" tabindex="-1" role="dialog" aria-labelledby="repsmodaltitle">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="repsmodaltitle"><strong>创建演讲者</strong></h4>
      </div>
      <div class="modal-body">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <lable for="repsname">演讲人姓名</lable>
                <input id="repsname" type="text" class="form-control input-md"/>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <lable for="repsavatar">演讲人头像</lable>
                <input id="repsavatar" type="file" class="form-control input-md"  accept="image/jpeg, image/png, application/x-bmp"/>
            </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>
        <button type="button" class="btn btn-primary" onclick="saveReps()">保存</button>
      </div>
    </div>
  </div>
</div>
<script>
<!--
function selectReps(repsId) {
    $("#repselectedValue").children().each(function(index,e){
        $(e).remove()
    })
    $("#repsoptions > #"+repsId).children().each(function(index,e){
        $("#repselectedValue").append($(e).clone(true,true));
    })
    $("#repselectedValue").append($("#repdefaultValue > #selectrepsicon").clone(true,true));
    $("#repsoptions").hide("slow");
}

function saveReps() {
    cleanModal();
    closeRepsModal()
}

function cleanModal() {
    $("#repsname").val("");
    $("#repsavatar").val("");
}

function closeRepsModal() {
    $("#repsmodal").modal("hide");
}
//-->
</script>